<!-- 学社 - 创建学社 -->
<template>
  <view>
    <z-navbar title="编辑资料" :border-bottom="true" bg-color="#F4AE20"></z-navbar>
    <!-- </template> -->
    <view class="p-4 pb-20">
      <z-file-upload ref="uploader" :file-list="state.cover" max-count="1" custom-btn auto-upload width="686"
        height="480">
        <template #addBtn>
          <image :src='state.club_id ? state.cover[0] : "/static/images/home/img_cover.png"'
            style="width: 686rpx; height: 480rpx" mode="aspectFill" />
        </template>
      </z-file-upload>
      <view class="c-#F4AF22 text-26">学社封面推荐尺寸：620*415</view>
      <!-- 学社名称 -->
      <view class="title mt-4">学社名称</view>
      <view class="relative mt-3 mb-4">
        <u-input v-model="state.club_name" height="68" placeholder="学社名称" placeholder-style="color: #999; fontSize: 24rpx"
          :custom-style="inputStyle" />
        <u-line color="#E5E5E5" />
      </view>
      <!-- 学社介绍 -->
      <view class="title mt-4">学社介绍</view>
      <view class="relative mt-3 mb-4">
        <u-input v-model="state.content" type="textarea" height="240" auto-height placeholder="学社介绍"
          :maxlength="state.maxInputNum" placeholder-style="color: #999; fontSize: 24rpx"
          :custom-style="textareaInputStyle" />
        <view class="absolute bottom-30 right-30 z-2 c-#999 text-24">{{ enteredNum }}/{{ state.maxInputNum }}</view>
        <u-line color="#E5E5E5" />
      </view>
      <!-- 阵营介绍 -->
      <view class="title">阵营介绍</view>
      <view v-for="(item, index) in state.list" :key="index">
        <view class="flex items-center h-80 mt-4">
          <u-image class="flex-shirk-0" shape="circle" width="80" height="80"
            :src="item.user?.avatar ?? '/static/images/user/ic_def_avatar.png'"
            @click="toHomePage(item.user?.id)"></u-image>
          <view class="flex-1 flex flex-col justify-between ml-3 h-76 text-single">
            <view class="flex items-center">
              <view class="c-#333 text-32" @click="toHomePage(item.user?.id)">{{ item.user?.nickname }}</view>
              <view class="tag-identity ml-2"
                :style="{ backgroundColor: tagColor[item.member_position - 1] ?? '#F4AF22' }">{{
                  formatIdentity(item.member_position) }}</view>
            </view>
            <view class="c-#999 text-24 text-single" @click="onIntro(item)">{{ item.intro || '你还没有为成员介绍过他哦' }}</view>
          </view>
          <image class="w-14 h-24 flex-shirk-0" src="/static/images/home/ic_more.png"></image>
        </view>
      </view>
    </view>
    <view class="h-200"></view>
    <!-- <template #bottom> -->
    <view class="bottom-wrap-16 bg-white">
      <u-line color="#eee" />
      <view class="btn-submit" @click="onSubmit">保存</view>
    </view>
    <!-- 介绍编辑弹窗 -->
    <u-modal v-model="state.showEditModal" :show-title="false" border-radius="12" :show-cancel-button="false"
      :show-confirm-button="false">
      <view class="slot-content">
        <view @click="state.showEditModal = false" class="absolute top-0 right-17 w-166 h-166 flex justify-end">
          <image class="mt-3 mr-2 w-22 h-22" src="/static/images/home/ic_delete.png" />
        </view>

        <view class="flex items-center h-80 mt-4">
          <u-image class="flex-shirk-0" shape="circle" width="80" height="80"
            :src="state.editCurrentMember?.user?.avatar ?? '/static/images/user/ic_def_avatar.png'"></u-image>
          <view class="flex-1 flex items-center text-single ml-2">
            <view class="c-#333 text-32 text-single">{{ state.editCurrentMember?.user?.nickname }}</view>
            <view v-if="state.editCurrentMember?.member_position > 0" class="tag-identity ml-2"
              :style="{ backgroundColor: tagColor[state.editCurrentMember?.member_position] ?? '#F4AF22' }">{{ identity }}
            </view>
          </view>
        </view>
        <view class="relative mt-4 mb-3">
          <u-input v-model="state.intro" type="textarea" height="240" auto-height placeholder="成员介绍编辑"
            :maxlength="state.maxInputNum" placeholder-style="color: #999; fontSize: 24rpx" :custom-style="inputStyle" />
          <view class="absolute bottom-30 right-30 z-2 c-#999 text-24">{{ enteredNum1 }}/{{ state.maxInputNum }}</view>
          <u-line color="#E5E5E5" />
        </view>
        <view class="flex items-center justify-center">
          <view class="btn-save" @click="onIntroSave">保存</view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script setup>
import { showToast } from '@/common/util/uni'
import { refreshPrePage, toHomePage } from '@/common/util/util'
import { societyIdentity } from '@/common/constant/society.js'
import { formatIdentity } from '@/common/util/util'
import { getMemberDetail, postClubProfile, postMemberEditIntro } from '@/common/http/module/society.js'

// const list = ref();
const uploader = ref()
const state = reactive({
  club_id: '', // 学社id
  showEditModal: false,
  cover: [], // 封面图
  content: '',
  club_name:'',
  intro: '',
  maxInputNum: 100,
  list: [],
  editCurrentMember: '' // 当前编辑简介成员信息
})

const inputStyle = {
  backgroundColor: '#F6F6F6',
  borderRaduis: '12rpx',
  padding: '10rpx'
}
const textareaInputStyle = {
  backgroundColor: '#F6F6F6',
  borderRaduis: '12rpx',
  padding: '30rpx'
}

const enteredNum = computed(() => {
  return state.content.length > 100 ? 100 : state.content.length
})
const enteredNum1 = computed(() => {
  return state.intro.length > 100 ? 100 : state.intro.length
})

// 学社身份中文名
const identity = computed(() => societyIdentity.find(v => v.value == state.editCurrentMember?.member_position)?.label)

// 身份标签颜色 1-顾问 2-管理员 3-社长 
const tagColor = ['#F8DC61', '#6FC9E7', '#F4AF22']

// 保存
function onSubmit() {
  if (!uploader.value.isAllUploaded()) return
  const images = uploader.value.getUploadedList()
  if (images && images.length == 0 && state.cover && state.cover.length == 0) {
    showToast('请上传封面')
    return
  }

  postClubProfile({
    club_id: state.club_id,
    club_introduce: state.content,
    club_name: state.club_name,
    cover_image: images.length > 0 ? images[0].url : state.cover[0]
  }).then(() => {
    showToast('保存成功')
    refreshPrePage('loadDetail')
    setTimeout(() => uni.navigateBack(), 600)
  })
}

// 阵营介绍编辑
function onIntro(item) {
  state.intro = item.intro
  state.editCurrentMember = item
  state.showEditModal = true
}

function onIntroSave() {
  postMemberEditIntro({
    member_id: state.editCurrentMember.id,
    intro: state.intro
  }).then(() => {
    showToast('编辑介绍成功')
    state.showEditModal = false
    loadData()
  })
}

// function refresh () {
//   list.value.onRefresh()
// }

function loadData() {
  getMemberDetail(state.club_id).then((res) => {
    const { info: { cover_image, club_introduce, club_name }, member_list } = res.data
    state.cover[0] = cover_image
    state.content = club_introduce
    state.club_name = club_name
    state.list = member_list
  });
}

// function loadData (page) {
//   list.value.onLoadResult(page ? [1, 2, 3, 4, 5, 6, 7, 8, 9] : "");
// }

onLoad(options => {
  state.club_id = options.club_id
  loadData();
});
</script>

<style lang="scss" scoped>
.bottom-wrap-16 {
  padding-top: 24rpx;
}

.title {
  color: #333;
  font-size: 40rpx;
  font-weight: bold;
}

.slot-content {
  position: relative;
  padding: 40rpx;
}

.tag-identity {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rpx 10rpx;
  color: #FFFFFF;
  font-size: 20rpx;
}

.btn-save {
  width: 100%;
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
  background-color: #F4AF22;
}
</style>
